<template>
    <!--TODO 下午  钱包-->
    <div>
        <v-header>
            <div slot="left" class="backs_icon"></div>
        </v-header>
        <div class="main_allScroll">
            <div class="noBusiness" v-if="!list ||list.length <= 0">
                <div class="integral_null_icon" style="margin-bottom: 0.64rem;"></div>
                <span>暂无宝呗明细~</span>
            </div>
            <scroller :on-infinite="!loadMore ? infinite: finish" ref="myscroller">
                <div class="list vux-1px-b" v-for="v in list">
                    <div>
                        <span>{{v.subject}}</span><span>{{v.finishTime}}</span></div>
                    <div>
                        <span>宝呗：{{v.totalAmount}}个</span>
                        <span :style="{color:v.type == 1?'#e94f4f':'#333'}">{{v.type == 1 ? '+':v.type == 2 ? '-': ''}}{{v.amount}}</span>
                    </div>
                </div>
                <load-more v-show="list && list.length > 0 && loadMore" :show-loading="false" tip="我是有底线的" background-color="#fbf9fe"></load-more>
            </scroller>
        </div>
    </div>
</template>
<script>
    import {LoadMore} from 'vux'
    export default {
        name: 'baby_detail',
        components: {LoadMore},
        data: function () {
            return {
                pageNum: 1,
                list: [],
                loadMore: false
            }
        },
        activated(){
            this.pageNum=1
            this.list = []
            this.loadMore = false
            this.getDetil();
        },
        methods: {
            getDetil(done){
                this.$ajax.finance.getVirtualcoinRecordList({
                    pageNum: this.pageNum,
                    pageSize: 15
                })
                    .then(res => {
                        if(done){
                            done()
                        }
                        if(this.pageNum == 1){
                            this.list = res.body.content.list
                        } else {
                            this.list = this.list.concat(res.body.content.list)
                        }

                        if(res.body.content.list.length < 15){
                            this.loadMore = true
                        }else{
                            this.loadMore = false
                            this.pageNum++
                            console.log(this.pageNum)
                        }
                    })
            },
            infinite(done){
                this.getDetil(done)
            },
            finish(done){
                this.$refs.myscroller.finishInfinite(2);
            }
        }
    }
</script>
<style lang="less" scoped>
    body{
        background: #fff;
    }
    .main_allScroll{
        background: #fff;
    }
    .list {
        padding: 0.28rem 0.24rem 0.16rem 0.3rem;
        div {
            display: flex;
            justify-content: space-between;
            align-items: center;
            &:first-of-type {
                font-size: 0.28rem;
                line-height: 0.32rem;
                color: #333;
                text-align: left;
                span{
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                span:first-of-type {
                    max-width: 60%;
                }
                span:last-of-type {
                    max-width: 40%;
                    color: #999;
                    text-align: right;
                    font-size: .24rem;
                    margin-top: 0.04rem;
                }
            }
            &:last-of-type {
                font-size: 0.26rem;
                line-height: 0.26rem;
                text-align: left;
                color: #666;
                margin-top: 0.2rem;
                span:last-of-type {
                    text-align: right;
                    color: #333;
                    font-weight: bold;
                    &.up {
                        color: #E94f4f;
                    }
                }
            }
        }
    }

</style>